<template>
<div　style="margin:10px;">
    <div class="bath-operation">
        <el-button round @click="back" icon="el-icon-back" size="small">返回</el-button>
        <el-button size="small" @click="bathRemove">批量删除</el-button>
        <el-button size="small" @click="bathRevoke">批量审核</el-button>
    </div>
    <div>
        <el-table
        ref="comment_table"
        :data="comment_tables"
        row-key="id"
        border
        highlight-current-row
         @selection-change="handleSelectionChange"
        style="width: 100%">
       <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column align="center" label="日期" min-width ="155" >
            <template slot-scope="scope">
                <span>{{ scope.row.date }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" min-width ="120" >
            <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="评论内容" min-width ="400" >
            <template slot-scope="scope">
                <span>{{ scope.row.comment }}</span>
            </template>
        </el-table-column>
         <el-table-column align="center" label="状态" min-width ="80" >
            <template slot-scope="scope">
                <span>{{ scope.row.status?'已审核':'未审核' }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="点赞量" min-width ="80" >
            <template slot-scope="scope">
                <span>{{ scope.row.liked }}</span>
            </template>
        </el-table-column>
         <el-table-column align="center" label="回复内容" min-width ="400" >
            <template slot-scope="scope">
                <span>{{ scope.row.response?scope.row.response:'-' }}</span>
            </template>
        </el-table-column>
         <el-table-column align="center" label="操作" width ="250" >
            <template slot-scope="scope">
                <el-button type="text"  @click="examine(scope)">审核</el-button>
                <span>|</span>
                <el-button type="text" @click="remove(scope)">删除</el-button>
                <span>|</span>
                <el-button type="text" @click="replay(scope)">回复</el-button>
                <span>|</span>
                <el-button type="text" @click="setTop(scope)">置顶</el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div class="table-page">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next ,jumper"
        :total="total">
        </el-pagination>
    </div>
</div>
</template>
<script>
import { getList } from '@/api/sys/errorlog'
export default {
    data() {
        return {
            comment_tables: [],
            total: 100,
            listQuery: {
                currentPage: 1,
                size: 10
            }
        }
    },
    created() {
        this.getList()
    },
    methods:{
        getList(){
            this.comment_tables = [
                    {
                        id:"1",
                        date:'2018-09-19 18:21:45',
                        name:'大鲨鱼',
                        comment:'阿打算给大家伙都嘎哈的噶的观点',
                        status: true,
                        liked: 1000
                    }
                ]
        },
        handleSearch(){
            this.listQuery.currentPage = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.listQuery.currentPage = 1
            this.listQuery.size = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.currentPage = val
            this.getList()
        },
        handleSelectionChange(val){
            console.log(val)
        },
        bathRemove(){

        },
        bathRevoke(){

        },
        back(){
          this.$router.back(-1)
        }
     }
} 
</script>
<style rel="stylesheet/scss" lang="scss">
.table-search{
  margin: 10px 0px;
}
.table-page{
    width: 700px;
    margin: 2px auto;
}
.bath-operation{
    margin: 10px 0px;
    el-button{
        margin-right: 10px;
    }
}
</style>